<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JointForce邀请记录</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-table.min.css" />
</head>
<body>
<div class="container">
<div id="toolbar" class="fixed-table-toolbar" style="margin-bottom: -40px">
    <button id="re_send_selected" class="btn btn-danger remove" disabled>
        重新发送选中邀请
    </button>
</div>
<table id="table" data-toggle="table"
       data-url="data/invited.json"
       data-click-to-select="true"
       data-row-style="rowStyle"
       data-query-params="queryParams"
       data-pagination="true"
       data-search="true"
       data-height="600">
    <thead>

    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id">ID</th>
        <th data-field="invited_name">受邀人名称</th>
        <th data-field="invited_phone">受邀人手机</th>
        <th data-field="invited_email">受邀人邮箱</th>
        <th data-field="inviter_name">邀请人名称</th>
        <th data-field="inviter_org">邀请人部门</th>
        <th data-field="invite_time">邀请时间</th>
        <th data-field="status">邀请状态</th>
        <th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">操作</th>
    </tr>
    </thead>
</table>
</div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.min.js"></script>
<script>
    function rowStyle(row, index) {
        var classes = ['active', 'success', 'info', 'warning', 'danger'];

        if (row.status == "未接受邀请") {
            return {
                classes: 'warning'
            };
        }

        if (row.status == "程序错误，发送邀请未成功") {
            return {
                classes: 'danger'
            };
        }
        return {};
    }
    function queryParams() {
        return {
            type: 'owner',
            sort: 'updated',
            direction: 'desc',
            per_page: 100,
            page: 1
        };
    }

    var $table = $('#table'), $remove = $('#re_send_selected');

    $(function () {
        $table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
            $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
        });
        $remove.click(function () {
            var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id
            });
            alert('重新发送选中邀请, rows: ' + ids);
            $remove.prop('disabled', true);
        });
    });


    function actionFormatter(value, row, index) {
        return [
            '<button class="btn btn-primary resend">重新发送邀请</button>'
        ].join('');
    }

    window.actionEvents = {
        'click .resend': function (e, value, row, index) {
            alert('重新发送该邀请, row: ' + JSON.stringify(row));
            console.log(value, row, index);
        }
    };

</script>
</body>
</html>